<template>  
    <div class="teacher-search">  
      <div class="search-bar">  
        <input  
          v-model="searchQuery"  
          placeholder="输入老师姓名"  
        />  
        <button @click="searchCourses">查询</button>  
      </div>  
      <div v-if="showTable">  
        <table>  
          <thead>  
            <tr>  
              <th>任课教师</th>  
              <th>任课科目</th>  
              <th>任课教室</th>  
              <th>任课时间</th>  
            </tr>  
          </thead>  
          <tbody>  
            <tr v-for="course in filteredCourses" :key="course.id">  
              <td>{{ course.teacherName }}</td>  
              <td>{{ course.subject }}</td>  
              <td>{{ course.classroom }}</td>  
              <td>{{ course.time }}</td>  
            </tr>  
          </tbody>  
        </table>  
      </div>  
      <p v-else>请输入老师姓名并点击查询按钮以查看课程安排。</p>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        searchQuery: '',  
        allCourses: [  
          { id: 1, teacherName: '张老师', subject: '数学', classroom: '101', time: '周一 8:00-10:00' },  
          { id: 2, teacherName: '李老师', subject: '英语', classroom: '202', time: '周二 10:00-12:00' },  
          { id: 3, teacherName: '王老师', subject: '物理', classroom: '303', time: '周三 14:00-16:00' },  
        ],  
        filteredCourses: [],  
        showTable: false,  
      };  
    },  
    methods: {  
      searchCourses() {  
        const query = this.searchQuery.trim().toLowerCase();  
        this.filteredCourses = this.allCourses.filter(course =>  
          course.teacherName.toLowerCase().includes(query)  
        );  
        this.showTable = this.filteredCourses.length > 0;  
        if (!this.showTable) {  
          alert('查无此人');  
        }  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  .teacher-search {  
    max-width: 600px;  
    margin: 0 auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 8px;  
  }  
    
  .search-bar {  
    margin-bottom: 20px;  
    display: flex;  
    align-items: center;  
  }  
    
  .search-bar input {  
    width: calc(100% - 100px);  
    padding: 10px;  
    box-sizing: border-box;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
  }  
    
  .search-bar button {  
    padding: 10px 20px;  
    margin-left: 10px;  
    border: none;  
    background-color: #204368;  
    color: white;  
    border-radius: 4px;  
    cursor: pointer;  
  }  
    
  .search-bar button:hover {  
    background-color: #0056b3;  
  }  
    
  table {  
    width: 100%;  
    border-collapse: collapse;  
    margin-top: 20px;  
  }  
    
  th, td {  
    padding: 10px;  
    border: 1px solid #ddd;  
    text-align: left;  
  }  
    
  th {  
    background-color: #f4f4f4;  
  }  
  </style>